<template>
  <div class="versreen-base-card base-card backgroundc"
       :style="{ height: height }">
    <div class="card-header">
      <div>
        <slot name="title">
          <div :class="isCursor ? 'handle-title' : 'title'"
               :style="{ 'font-size': titleFontSize }"
               @click="handleClick">
            {{ title }}
            <!-- <img :src="rightArrow"
                 class="right-arrow" /> -->
          </div>
        </slot>
      </div>
      <div class="left">
        <slot name="tag"> </slot>
      </div>

      <div class="right">
        <slot name="right"> </slot>
      </div>
    </div>

    <div class="content"
         :style="contentStyle">
      <slot>
        <div class="empty">暂无数据</div>
      </slot>
    </div>
  </div>
</template>

<script setup>
import rightArrow from "@/assets/img/theme1/right-arrow.png";

defineOptions({
  name: "vptCards",
});
const props = defineProps({
  title: { type: String, default: "" },
  titleFontSize: { type: String, default: "0.2rem" },
  height: { type: String, default: "6.2rem" },
  contentStyle: {
    type: Object,
    default: () => {
      return {
        padding: "0.2rem",
      };
    },
  },
  isCursor: { type: Boolean, default: false },
});

const handleClick = () => {
  emit("handleClick", "");
};
const emit = defineEmits(["handleClick"]);
</script>

<style lang="less" scoped>
@import "./style/common.less";
@import "./style/index.less";
.backgroundc {
  background: #fff;
}
</style>